/**
 * 自定义头部--lxx
 * time:22-08-11
 */
<template>
	<view class="header" >
		<view class="header_main" :style="{'background':backgroundColor,'color':textColor,'position':positionState}">
			<view class="status_bar" :style="{'height': statusBarHeight + 'px'}"></view>
			<view class="header flex AI-center JC-space-between" :style="{'height': headerHeight + 'rpx'}">
				<view class="header_left flex AI-center JC-space-between">
					<view class="icon flex AI-center" @click="goBack" v-if="leftIconShow">
						<image src="../../static/pubImgs/backW.png" mode="widthFix"></image>
					</view>
					<view class="left_txt" @click="goHome" v-if="leftTxtShow">
						{{ leftTxt }}
					</view>
					<view class="left_solt">
						<slot name="left"></slot>
					</view>
				</view>
				<view class="header_center" @click="openClose" >
					<view class="title">
						{{ title }}
					</view>
					<view class="title">
						<slot name="center"></slot>
					</view>
				</view>
				<view class="header_right flex AI-center JC-center">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		<!-- 填充头部防止塌陷 -->
		<view class="status_bar" :style="{'height': statusBarHeight + 'px'}"></view>
		<view v-if="isShowHeaderBox" :style="{'height': headerHeight + 'rpx','background':backgroundColor2}" ></view>
	</view>
</template>
<script>
	const app = getApp()
	export default {
		name: "Header",
		props: {
			// 头部高度 默认为88rpx
			headerHeight:{
				type: [String, Number],
				default: 88
			},
			// 是否显示左侧内容
			leftIconShow: {
				type: Boolean,
				default: true
			},
			leftTxtShow: {
				type: Boolean,
				default: false
			},
			leftTxt: {
				type: String,
				default: '首页'
			},
			// 样式部分
			backgroundColor: {
				type: String,
				default: 'linear-gradient(90deg, rgba(10, 207, 254, 1) 0%, rgba(74, 92, 255, 1) 100%)'
			},
			backgroundColor2: {
				type: String,
				default: "transparent"
			},
			textColor: {
				type: String,
				default: '#fff'
			},
			title: {
				type: String,
				default: ''
			},
			// 是否需要生成和头部高度相同的盒子
			isShowHeaderBox:{
				type: Boolean,
				default: true
			},
			positionState:{
				type: String,
				default: 'fixed'
			}
			
		},
		data() {
			return {
				statusBarHeight: 0
			};
		},
		created() {
			const that = this;
			uni.getSystemInfo({
				success:(res)=>{
					// 获取状态栏高度
					that.statusBarHeight = res.statusBarHeight
				}
			})
		
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			goHome(){
				uni.reLaunch({
					url:"/pages/index/index"
				})
			},
			openClose() {
				// console.log('app',getApp());
				// uni.navigateTo({
				// 	url:'/pages/map/indexnew'
				// })
				// 测试使用
				// getApp().openClose();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header_main {
		// position: fixed;
		// position: absolute;
		width: 100%;
		z-index: 9999;
		top: 0;
		left: 0;
		.header {
			padding: 0 16rpx;
			box-sizing: border-box;
			.header_left {
				width: 20%;

				.icon {
					width: 48rpx;
				}

				.left_txt {
					font-size: $font-size-lg;
					line-height: $font-size-lg;
					
				}
			}

			.header_center {
				width: 60%;
				text-align: center;
				/*溢出隐藏*/
				overflow: hidden;
				/*显示省略号*/
				text-overflow: ellipsis;
				/*不换行*/
				white-space: nowrap;
				font-size: $font-size-big;
				// background-color: $fontSize; // 测试使用
			}

			.header_right {
				width: 20%;
			}

		}
	}
</style>
